<template>
  <el-dialog
    :title="title"
    :visible.sync="isShow"
    width="45%"
    @close="closeHandler"
  >
    <!-- 绘制表单 -->
    <el-form
      :model="formData"
      ref="form"
      :rules="formRules"
      label-width="120px"
      size="small"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" placeholder="2-10个字符"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" placeholder="2-10个字符"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="managerId">
        <el-select
          clearable
          v-model="formData.managerId"
          placeholder="请选择负责人"
        >
          <el-option
            v-for="item in managerList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          v-model="formData.introduce"
          placeholder="1-100个字符"
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="btnOk" size="small" type="primary">提交</el-button>
        <el-button @click="isShow = false" size="small">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import {
  getManagerApi,
  getDepartmentListApi,
  addDepartmentApi,
  getDepartmentInfoApi,
  editDepartmentApi,
} from "@/api/department";
export default {
  data() {
    // 检查部门编码是否重复
    const checkCodeRepeat = async (rule, value, cb) => {
      // 1. 获取最新的组织架构信息
      let res = await getDepartmentListApi();
      // 2. 检查部门编码是否重复
      let isExist;
      if(this.formData.id){  // 修改 (排除自己)
       isExist = res.filter(item=>item.id !== this.formData.id).some((item) => item.code === value);
      }else{  // 添加
        isExist = res.some((item) => item.code === value);
      }
      isExist ? cb(new Error("部门编码已存在")) : cb();
    };
    // 检查部门名称是否重复
    const checkNameRepeat = async (rule, value, cb) => {
      // 1. 获取最新的组织架构信息
      let res = await getDepartmentListApi();
      // 2. 检查部门名称是否重复
       let isExist;
      if(this.formData.id){  // 修改 (排除自己)
       isExist = res.filter(item=>item.id !== this.formData.id).some((item) => item.name === value);
      }else{  // 添加
        isExist = res.some((item) => item.name === value);
      }
      isExist ? cb(new Error("部门名称已存在")) : cb();
    };
    return {
      // 弹框控制变量
      isShow: false,
      // 表单数据变量
      formData: {
        code: "",
        introduce: "",
        managerId: "",
        name: "",
        pid: "",
      },
      // 表单验证规则
      formRules: {
        code: [
          { required: true, message: "请输入", trigger: "blur" },
          { validator: checkCodeRepeat, trigger: "blur" },
        ],
        introduce: [{ required: true, message: "请输入", trigger: "blur" }],
        managerId: [{ required: true, message: "请选择", trigger: "change" }],
        name: [
          { required: true, message: "请输入", trigger: "blur" },
          { validator: checkNameRepeat, trigger: "blur" },
        ],
      },
      // 部门负责人数据
      managerList: [],
    };
  },
  created() {
    this.getManagerList();
  },
  computed: {
    title() {
      return this.formData.id ? "修改部门" : "添加子部门";
    },
  },
  methods: {
    // 获取部门负责人
    async getManagerList() {
      let res = await getManagerApi();
      this.managerList = res;
    },
    // 提交数据
    async btnOk() {
      try {
        // 1. 表单校验
        console.log(this.formData);
        await this.$refs.form.validate();
        // 2. 整理数据(按需)
        // 3. 发起网络请求(封装API函数)
        this.formData.id
          ? await editDepartmentApi(this.formData)
          : await addDepartmentApi(this.formData);
        // 4. 提示成功
        this.$message.success(this.formData.id ? '修改成功':"添加成功");
        // 5. 关闭弹框
        this.isShow = false;
        // 6. 列表更新
        this.$emit("updateList");
      } catch (error) {
        console.log(error);
      }
    },
    // 关闭重置
    closeHandler() {
      // 1.表单重置
      this.formData = {
        code: "",
        introduce: "",
        managerId: "",
        name: "",
        pid: "",
      };
      // 2.移除校验
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    // 数据回显
    async replyViewData(id) {
      // 1. 发起网络请求，根据ID获取数据
      let res = await getDepartmentInfoApi(id);
      // 2. 整理数据(按需)
      // 3. 数据赋给表单
      this.formData = res;
      // 4. 弹框打开
      this.isShow = true;
    },
  },
};
</script>

<style lang="scss" scoped></style>
